<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>按日期修改人数统计</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="contentClass mt20">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-date-picker v-model="startendtime"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          size="small"
                          style="width:100%"
                          :default-time="['00:00:00', '23:59:59']"
                          value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-col>
        <el-col :span="2">
          <el-button type="primary"
                     size="small"
                     @click="statistical">统计</el-button>
        </el-col>
        <el-col :span="16"
                align="right">
          <el-button type="primary"
                     size="small"
                     @click="exportsDetail">导出未完成修改学生名单</el-button>
          <el-button type="primary"
                     size="small"
                     @click="exports">导出</el-button>
        </el-col>
      </el-row>
      <el-table :data="tableData"
                border
                style="width: 100%"
                class="mt10">
        <el-table-column type="index"
                         label="序号"
                         width="60">
        </el-table-column>
        <el-table-column prop="className"
                         label="班级名称">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)"
                       type="text"
                       size="small">{{ scope.row.className }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="majorName"
                         label="专业">
        </el-table-column>
        <el-table-column prop="instructor"
                         label="辅导员">
        </el-table-column>
        <el-table-column prop="instructorPhone"
                         label="辅导员联系电话">
        </el-table-column>
        <el-table-column prop="allNum"
                         label="总人数">
        </el-table-column>
        <el-table-column prop="overnum"
                         label="已经通过人数">
        </el-table-column>
        <el-table-column prop="noNum"
                         label="未通过人数">
        </el-table-column>
        <el-table-column prop="rate"
                         label="完成率">
          <template slot-scope="scope">
            <span style="color:red">{{scope.row.rate | percent}}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex"
              justify="center"
              class="mt20">
        <el-col :span="8">
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page.sync="pgNum"
                         :page-size="pgSize"
                         layout="total, prev, pager, next"
                         :total="total">
          </el-pagination>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { common } from '@api/index'
import { downloadFile } from '@/tools/utils'
export default {
  data () {
    return {
      tableData: [],
      bread: this.$route.query.bread,
      collegeCode: this.$route.query.collegeCode,
      startendtime: null,
      pgNum: 1,
      pgSize: 10,
      total: 0
    }
  },
  mounted () {
    this.startendtime = this.$route.query.startendtime
    if (this.startendtime) {
      this.statistical()
    }
  },
  methods: {
    handleSizeChange (val) {
      this.pgSize = val
      this.statistical()
    },
    handleCurrentChange (val) {
      this.pgNum = val
      this.statistical()
    },
    handleClick (row) {
      this.$router.push({
        name: 'collegeclass-modify-situation',
        query: {
          bread1: row.className,
          classCode: row.classCode,
          collegeCode: this.collegeCode,
          startendtime: this.startendtime
        }
      })
    },
    statistical () {
      let params = {
        collegeCode: this.collegeCode,
        endDate: this.startendtime[1],
        startDate: this.startendtime[0],
        pageNum: this.pgNum,
        pageSize: this.pgSize
      }
      common()._queryClassCensusList(params).then((res) => {
        if (res.status && res.data) {
          this.tableData = res.data.list
          this.total = res.data.total
        }
      })
    },
    // 导出
    exports () {
      if (this.startendtime === undefined || this.startendtime === null) {
        this.$message.warning('请选择日期')
      } else {
        let params = {
          endDate: this.startendtime[1],
          startDate: this.startendtime[0],
          pageNum: this.pgNum,
          pageSize: this.pgSize
        }
        common()._downClassCensusList(params).then((res) => {
          if (res.status && res.data) {
            downloadFile('班级个人信息情况表', `./api/common/downloadFile?path=${res.data}&name=班级个人信息情况表.xlsx`)
          }
        })
      }
    },
    // 导出未完成名单
    exportsDetail () {
      if (this.startendtime === undefined || this.startendtime === null) {
        this.$message.warning('请选择日期')
      } else {
        let params = {
          endDate: this.startendtime[1],
          startDate: this.startendtime[0]
        }
        common()._downCollegeCensusDetail(params).then((res) => {
          if (res.status && res.data) {
            downloadFile('学生未完成修改名单', `./api/common/downloadFile?path=${res.data}&name=学生未完成修改名单.xlsx`)
          }
        })
      }
    }
  }
}
</script>
